<template>
	<view class="newOrder">
		<view class="form">
			<view class="form_item1">
				<view class="text"> <text>*</text>货号: </view>
				<view class="input">
					<input v-model="proId" type="text" placeholder="请输入货号" />
				</view>
			</view>
			<!-- <view class="form_item1">
				<view class="text"> <text>*</text>颜色: </view>
				<view class="input">
					<input v-model="proColor" type="text" placeholder="请输入颜色" />
				</view>
			</view> -->
			<view class="form_item1">
				<view class="text"> <text>*</text>单价: </view>
				<view class="input">
					<input v-model="proPrice" type="digit" placeholder="请输入单价" />
				</view>
			</view>
			<!-- <view class="form_item1">
				<view class="text"> <text>*</text>尺码:</view>
				<view class="input">
					<input v-model="proSize" type="text" placeholder="请输入尺码" />
				</view>
			</view> -->
			<view class="form_item1">
				<view class="text"> 备注: </view>
				<view class="input">
					<input v-model="note" class="note" type="text" placeholder="请输入备注" />
				</view>
			</view>
		</view>
		<view @tap="add" class="btn"> 添加 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				proId: "",
				// proColor: "",
				proPrice: "",
				// proSize: "",
				note: "",
			};
		},
		methods: {
			add() {
				if (this.proId == "") {
					uni.showToast({
						title: "请输入货号",
						icon: "none",
					});
				} else if (this.proPrice == "") {
					uni.showToast({
						title: "请输入单价",
						icon: "none",
					});
				} else {
					this.$api
						.productCreateOrEditApi({
							proId: this.proId,
							// proColor: this.proColor,
							proPrice: this.proPrice,
							// proSize: this.proSize,
							remark: this.note,
						})
						.then((res) => {
							if (res.code == 200) {
								uni.showToast({
									title: "添加成功",
									icon: "none",
								});
								uni.navigateBack({

									delta: 1
									// url: "/pages/product/index",
								});
							}
						});
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
		height: 100vh;
	}

	.newOrder {
		background-color: #fff;
		height: 100vh;

		.form {
			padding: 38rpx 68rpx 32rpx 68rpx;
			background-color: #fff;
			// margin-top: 38rpx;

			.form_item1 {
				color: #bdbdbd;
				margin-bottom: 36rpx;
				text-indent: 1em;
				display: flex;
				align-items: center;

				.text {
					font-size: 0.875rem;
					margin-bottom: 22rpx;

					text {
						color: #fe3430;
					}
				}

				.input {
					display: flex;
					align-items: center;
					flex: 1;

					// .note {
					// 	width: 613rpx;
					// 	height: 181rpx;
					// 	background: #F2F2F2;
					// 	border-radius: 47rpx;
					// }
					input {
						height: 94rpx;
						width: 100%;
						background: #f2f2f2;
						border-radius: 47rpx;
						text-indent: 1em;
						color: #000;
					}

					button {
						width: 73rpx;
						height: 38rpx;
						background: #fe3430;
						border-radius: 49rpx;
						color: #fff;
					}
				}
			}

			.btn {
				display: flex;

				button {
					height: 58rpx;
					line-height: 58rpx;
					background: #fe3430;
					border-radius: 49rpx;
					color: #fff;
					margin-left: 0;
					margin-right: 10rpx;
				}
			}
		}

		.btn {
			background-image: url("/static/images/Registration/button.png");
			background-size: 280rpx 123rpx;
			color: #fff;
			width: 280rpx;
			height: 123rpx;
			line-height: 100rpx;
			text-align: center;
			margin-left: 50%;
			transform: translateX(-50%);
			border-radius: 49rpx;
		}
	}
</style>
